<template>
  <div class="question-list">
    <div v-for="(item, index) of questionList" :key="index" class="item">
      <div class="top">
        <p class="title">{{ `第${index + 1}题: ` }}{{ item.subjecName }}</p>
        <div v-show="editMode" class="right-buttons">
          <el-button size="small" @click="handleEdit(item)">编辑 </el-button>
          <!-- <el-button size="small" @click="handleEdit(item)">删除 </el-button> -->
        </div>
      </div>

      <ul class="answer-list">
        <li v-for="(item, index) of item.adds" :key="index">
          <el-radio disabled :label="item.answer">{{ item.answer }}</el-radio>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "QuestionList",
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
    questionList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handleEdit(item) {
      this.$emit("handleEdit", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.answer-list {
  list-style: none;
}
.item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 24px;
  .top {
    display: flex;
    justify-content: space-between;
  }
}
.right-buttons {
  margin-top: 24px;
}
</style>
